<<template>
  <div style="margin: 10px;">
    <el-row :gutter="10">
        <el-col :span="12">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-card style="height: 350px;">
                        <div class="title">停车状态统计</div>
                        <div class="headline">车位总数：{{cheweiSum}}</div>
                            <el-row :gutter="10">
                                <el-col :span="12" style=" text-align: center;">
                                    <div class="shebeiTop">
                                        <el-image
                                            style="width: 60px; height: 60px;background-color: aquamarine;border-radius: 50%;"
                                            :src="require('@/assets/img/car.png')"
                                            >
                                        </el-image>
                                    </div>
                                    <div class="shebeiTop">有车</div>
                                    <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">150</div>
                                </el-col>
                                <el-col :span="12" style=" text-align: center;">
                                    <div class="shebeiTop">
                                        <el-image
                                            style="width: 60px; height: 60px;background-color: aquamarine;border-radius: 50%;"
                                            :src="require('@/assets/img/empty.png')"
                                            >
                                        </el-image>
                                    </div>
                                    <div class="shebeiTop">空闲</div>
                                    <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">50</div>
                                </el-col>
                            </el-row>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card style="height: 350px;">
                        <div class="title">车位类型统计</div>
                        <div class="headline">车位总数：{{cheweiSum}}</div>
                        <div class="echartsbox" ref="echarts">
                            <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                        </div>
                     </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-card style="height: 350px;margin-top: 10px;">
                        <div class="title">今日节目播放列表</div>
                        <div class="cesuo-list">
                            <el-table
                            :data="tableData"
                            height="300"
                            style="width: 100%;font-size: 10px"
                            >
                            <el-table-column
                                prop="alerttype"
                                label="警告类型"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="devicetype"
                                label="设备类型"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="alarmfacility"
                                label="告警设备"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="deviceLocation"
                                label="设备位置"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="warningtime"
                                label="告警时间"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="processingStatus"
                                label="处理状态"
                                align="center">
                            </el-table-column>
                            </el-table>
                        </div>
                     </el-card>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="12">
            <el-card style="height: 350px;">
                <div class="title">今日车流统计</div>
                <div class="echartsbox" ref="echarts2">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
            <el-card style="height: 350px;margin-top: 10px;">
                <div class="title">车辆停留时长排行</div>
                <div class="qushiboxc">
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="4"><div class="ph-text"> 京A123456</div></el-col>
                        <el-col :span="18"><el-progress :text-inside="true" :stroke-width="16" :percentage="90" color="#6666ff"></el-progress></el-col>
                        <el-col :span="2"><div class="ph-text"> 12h</div></el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="4"><div class="ph-text"> 京A123456</div></el-col>
                        <el-col :span="18"><el-progress :text-inside="true" :stroke-width="16" :percentage="80" color="#6666ff"></el-progress></el-col>
                        <el-col :span="2"><div class="ph-text"> 12h</div></el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="4"><div class="ph-text"> 京A123456</div></el-col>
                        <el-col :span="18"><el-progress :text-inside="true" :stroke-width="16" :percentage="68" color="#6666ff"></el-progress></el-col>
                        <el-col :span="2"><div class="ph-text"> 12h</div></el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="4"><div class="ph-text"> 京A123456</div></el-col>
                        <el-col :span="18"><el-progress :text-inside="true" :stroke-width="16" :percentage="58" color="#6666ff"></el-progress></el-col>
                        <el-col :span="2"><div class="ph-text"> 12h</div></el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="4"><div class="ph-text"> 京A123456</div></el-col>
                        <el-col :span="18"><el-progress :text-inside="true" :stroke-width="16" :percentage="40" color="#6666ff"></el-progress></el-col>
                        <el-col :span="2"><div class="ph-text"> 12h</div></el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="4"><div class="ph-text"> 京A123456</div></el-col>
                        <el-col :span="18"><el-progress :text-inside="true" :stroke-width="16" :percentage="50" color="#6666ff"></el-progress></el-col>
                        <el-col :span="2"><div class="ph-text"> 12h</div></el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="4"><div class="ph-text"> 京A123456</div></el-col>
                        <el-col :span="18"><el-progress :text-inside="true" :stroke-width="16" :percentage="43" color="#6666ff"></el-progress></el-col>
                        <el-col :span="2"><div class="ph-text"> 12h</div></el-col>
                    </el-row>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
        cheweiSum:'200',
        tableData:[{
            alerttype:'0751',
            devicetype:'节目1',
            alarmfacility:'普通节目',
            deviceLocation:'标签1',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'0752',
            devicetype:'节目1',
            alarmfacility:'普通节目',
            deviceLocation:'标签1',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'0753',
            devicetype:'节目1',
            alarmfacility:'普通节目',
            deviceLocation:'标签1',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'0754',
            devicetype:'节目1',
            alarmfacility:'普通节目',
            deviceLocation:'标签1',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'0755',
            devicetype:'节目1',
            alarmfacility:'普通节目',
            deviceLocation:'标签1',
            warningtime:'08:30',
            processingStatus:'09:30'
        },{
            alerttype:'0756',
            devicetype:'节目1',
            alarmfacility:'普通节目',
            deviceLocation:'标签1',
            warningtime:'08:30',
            processingStatus:'09:30'
        },]
    }
  },
  created () {
  },
  mounted () {
    this.chewieleixingEcharts()
    this.jinricheliuEcharts()
  },
  methods: {
    //车位类型统计
    chewieleixingEcharts(){
        var echarts=this.$refs.echarts;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echarts
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echarts);
		  }
		  
		var option;

        option = {
            title: {
                // text: 'Referer of a Website',
                // subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:[]
            },
            series: [
                {
                // name: 'Access From',
                type: 'pie',
                center:['50%','50%'],//调整饼图的位置
                radius:'45%',
                emphasis: {
                    label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                    },
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: [
                    { value: 80, name: '员工车位' },
                    { value: 60, name: '固定车位' },
                    { value: 60, name: '临时车位' }
                ],
                label:{
                    formatter:function(data){
                        return `${data.name} ${data.value}`
                    }
                    },
                }
            ]
        };

        option && myChart.setOption(option);
		  		//自适应屏幕大小
		window.addEventListener('resize', function() {
			myChart.resize()
		})
    },
    //今日车流统计
    jinricheliuEcharts(){
        var echarts2=this.$refs.echarts2;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echarts2
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echarts2);
		  }
		  
		var option;

        option = {
            title: {
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
                }
            },
            legend: {
                data: []
            },
            toolbox: {
                feature: {
                // saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                data: ['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [0, 1, 20, 120, 40, 20, 10,30,100,20,10,0]
                }
            ]
        };

        option && myChart.setOption(option);
		  		//自适应屏幕大小
		window.addEventListener('resize', function() {
			myChart.resize()
		})
    },
  },
}
</script>
<style lang="scss" scoped>
.title{
	padding: 10px;
	font-weight: bold;
}
.shebeiTop{
    margin-top: 20px;
    font-size: 12px;
}
.headline{
    text-align: center;
}
.qushiboxc{
    height: 300px;
    overflow-y: scroll;
    overflow-x:hidden;
        .paihang-lanmu{
            padding:15px 5px 15px 15px;
        .ph-text{
            font-size: 12px;
        }
    }
}

.echartsbox{
    width: 100%;
    height: 300px;
}
</style>
